class DataCollectionView {
    constructor(container, model) {
        this.container = container;
        this.model = model;
        this.init();
    }

    init() {
        this.bindEvents();
        this.render();
    }

    bindEvents() {
        const addDataTypeBtn = this.container.querySelector('.add-data-type-btn');
        if (addDataTypeBtn) {
            addDataTypeBtn.addEventListener('click', () => this.handleAddDataType());
        }

        this.container.addEventListener('click', (e) => {
            if (e.target.matches('.remove-item-btn')) {
                const typeKey = e.target.closest('.selected-item').dataset.typeKey;
                this.handleRemoveDataType(typeKey);
            }
        });
    }

    handleAddDataType() {
        const select = this.container.querySelector('#data-type-select');
        const selectedOption = select.options[select.selectedIndex];
        const typeKey = selectedOption.value;
        
        if (!typeKey) {
            alert('请选择一个数据类型');
            return;
        }

        if (this.model.hasDataType(typeKey)) {
            alert('该数据类型已经添加');
            return;
        }

        const typeName = selectedOption.text;
        const groupName = selectedOption.parentElement.label;

        // 获取已选择的目标和目的
        const selectedTargets = this.getSelectedTargets();
        const selectedPurposes = this.getSelectedPurposes();

        if (selectedPurposes.length === 0) {
            alert('请至少选择一个收集目的');
            return;
        }

        // 添加到模型
        this.model.addDataType(typeKey, {
            typeName,
            groupName,
            targets: selectedTargets,
            purposes: selectedPurposes
        });

        // 更新视图
        this.renderSelectedItem(typeKey);
        select.value = '';
    }

    handleRemoveDataType(typeKey) {
        const itemCard = this.container.querySelector(`.selected-item[data-type-key="${typeKey}"]`);
        if (!itemCard) return;

        itemCard.classList.remove('show');
        setTimeout(() => {
            itemCard.remove();
            this.model.removeDataType(typeKey);
        }, 300);
    }

    getSelectedTargets() {
        return Array.from(
            this.container.querySelectorAll('.data-targets-section .target-option input:checked')
        ).map(input => ({
            key: input.value,
            label: input.closest('.target-option').querySelector('span').textContent
        }));
    }

    getSelectedPurposes() {
        return Array.from(
            this.container.querySelectorAll('.data-purposes-section .purpose-option input:checked')
        ).map(input => ({
            key: input.value,
            label: input.closest('.purpose-option').querySelector('span').textContent
        }));
    }

    renderSelectedItem(typeKey) {
        const data = this.model.selectedTypes.get(typeKey);
        if (!data) return;

        const itemsGrid = this.container.querySelector('.selected-items-grid');
        if (!itemsGrid) return;

        const itemCard = document.createElement('div');
        itemCard.className = 'selected-item';
        itemCard.dataset.typeKey = typeKey;
        
        itemCard.innerHTML = this.generateItemCardHTML(data);
        itemsGrid.appendChild(itemCard);

        requestAnimationFrame(() => {
            itemCard.classList.add('show');
        });
    }

    generateItemCardHTML(data) {
        return `
            <div class="item-header">
                <div class="item-info">
                    <span class="item-group">${data.groupName}</span>
                    <span class="item-name">${data.typeName}</span>
                </div>
                <button class="remove-item-btn">移除</button>
            </div>
            <div class="item-summary">
                <div class="item-targets-summary">
                    <span class="summary-label">数据使用目标：</span>
                    <div class="selected-targets">
                        ${data.targets.length > 0 ? 
                            data.targets.map(target => `
                                <span class="target-tag">
                                    <input type="hidden" name="${target.key}" value="${target.key}">
                                    ${target.label}
                                </span>
                            `).join('') : 
                            '<span class="no-selection">未选择使用目标</span>'
                        }
                    </div>
                </div>
                <div class="item-purposes-summary">
                    <span class="summary-label">收集目的：</span>
                    <div class="selected-purposes">
                        ${data.purposes.map(purpose => `
                            <span class="purpose-tag">
                                <input type="hidden" name="${purpose.key}" value="${purpose.key}">
                                ${purpose.label}
                            </span>
                        `).join('')}
                    </div>
                </div>
            </div>
        `;
    }

    render() {
        // 初始渲染逻辑
    }
}

export default DataCollectionView; 